{% extends "EnsaoAppBundle::layout.html.twig" %}

{% block titre %}
	{{ parent() }} - جدول المواعيد
{% endblock %}

{% block css %}
	{{ parent() }}
{% endblock %}

{% block js %}
	{{ parent() }}
	<script type="text/javascript">
		$(function() {
		//activer le composant de Validation !
		$("#event_form").validationEngine('attach', {scroll: false, promptPosition :"topLeft:10" , prettySelect : true,useSuffix: "_chzn" });
		// Type de Dossier
		$elec=true; // indique le type de dossier (electronique,simple)
		$('.iPhoneCheckContainer').click(function(){
			if($elec == true){
				$elec=false;
				$('#NumDossierSimple').fadeIn(500);
				$('#NumDossierElec').fadeOut(0);
			}else{
				$elec=true;
				$('#NumDossierSimple').fadeOut(0);
				$('#NumDossierElec').fadeIn(500);
			}
		});
		// Type de l'evenement
		$('#radio-audiance').click(function(){
				$('#heure').fadeIn(1000);
				$('#type').fadeIn(1000);
				$('#dossier').fadeIn(1000);
				$('#fancybox-content').css('height','auto');
				$('#fancybox-content div').css('height','auto');
				$('.iPhoneCheckContainer').css('height','27px');
				
				}
			);
		$('#radio-procedure').click(function(){
				$('#heure').fadeOut(1000);
				$('#type').fadeIn(1000);
				$('#dossier').fadeIn(1000);
				}
			);
		$('#radio-autre').click(function(){				
				$('#heure').fadeIn(1000);
				$('#type').fadeOut(1000);
				$('#dossier').fadeOut(1000);
				}
			);
		
		// Calendar 
			var date = new Date();
			var d = date.getDate();
			var m = date.getMonth();
			var y = date.getFullYear();		
			$('#calendar').fullCalendar({
				header: {
					left: 'title',
					center: 'prev,next  ',
					right: 'today month,basicWeek,agendaDay'
				},
			  buttonText: {
					next: 'السابق ' ,
					prev: 'التالي'
				},
				editable: true,
				refetchEvents :'refetchEvents',
				selectable: true,
				selectHelper: true,
				dayClick: function(date, allDay, jsEvent, view) {
				var nDate=$.fullCalendar.formatDate( date, 'd' );
				var dDate=$.fullCalendar.formatDate( date, 'dddd ' );
				var fullDate=$.fullCalendar.formatDate( date, ' MMMM , yyyy' );
				$('#calendar .fc-header-title h2').html('<div class="dateBox"><div class="nD">'+nDate+'</div><div class="dD">'+dDate+'<div class="fullD">'+fullDate+'</div><div></div><div class="clear"></div>');
				},
				events: [
					{% for event in listes  %}
					{
						id: '{{ event.id }}',
						title: '{{ event.libelle }}',
						color: '{{ event.typeEvenement.coleur }}',
						start: new Date({{ event.date|date('Y') }}, {{ (event.date|date('m'))-1 }}, {{ event.date|date('d') }} )
					},
					{% endfor %}
					],
				// l'evenement dayClick
				dayClick: function(date, allDay, jsEvent, view) {
						$('#datepick').attr('value',date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
						$('#event_libelle').attr('value','');
						$('#event_heure').attr('value','');
						$('#event_numDossierElec').attr('value','');
						$('#event_numDossierSimple').attr('value','');
						$('#event_desc').attr('value','');
						$('.pop_box').click();
						$('#fancybox-content').css('height','auto');
						$('#fancybox-content div').css('height','auto');
						$('.iPhoneCheckContainer').css('height','27px');
					},
				eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
							loading("إنتظر",1);
					        jQuery.ajax({
								type: 'POST', // Le type de ma requete
								url: " {{path('evenement_eventDrop')}} ", // L'url vers laquelle la requete sera envoyee
								data: {
								    id: event.id, // Les donnees que l'on souhaite envoyer au serveur au format JSON
								    nbrJour: dayDelta
								  	}, 
								  success: function(data, textStatus, jqXHR) {
								    // La reponse du serveur est contenu dans data
								    // On peut faire ce qu'on veut avec ici
								    unloading();
								    showSuccess('تمت العملية بنحاح',6000);
								  },
								  error: function(jqXHR, textStatus, errorThrown) {
								    // Une erreur s'est produite lors de la requete
								    
								    alertMessage("خطــأ","الرمرجو اعادة المحاولة");
								    unloading();
								    revertFunc(); // annuler le deplacement de l'event
								  }
								});
					},
				eventClick:function(event){
					jQuery.ajax({
					type: 'POST', // Le type de ma requete
					url: " {{path('evenement_afficher')}} ", // L'url vers laquelle la requete sera envoyee
					dataType: 'json',
					data: {
					id: event.id, // Les donnees que l'on souhaite envoyer au serveur au format JSON
					},
					success: function(data, textStatus, jqXHR) {
					// La reponse du serveur est contenu dans data
					// On peut faire ce qu'on veut avec ici
					alert(data.libelle);
					},
					error: function(jqXHR, textStatus, errorThrown) {
					// Une erreur s'est produite lors de la requete
					alert('Erreur jqXHR='+errorThrown+' ');
					}
					})
				}
			});
		
		// Fixer l'affichage de la barre (jours,mois,annee) si le message de notification est affiché
		{% if app.session.hasFlash('notification') %}
			$('.fc-header-right').css('top','-105px');
		{% endif %}

		}); 
		</script>
{% endblock %}

{% block menu %}
	{{ parent() }}
{% endblock %}

{% block topcomumn %}
	{{ parent() }}
{% endblock %}

{% block titrepage %}
	جدول المواعــــيد
{% endblock %}

{% block messages %}

    {% for name,flash in app.session.flashes %}
		<div class="alertMessage success SE">{{ flash }}</div>
	{% endfor %}
{% endblock %}

{% block content %}

	<div style="display:none"> <a class="pop_box"  href="#addEvenet">ajouter un evenement</a></div>
	<div style="display:none"><div id="addEvenet">
		<form id="event_form" method="POST" action="evenement/ajouter">  
            <div class="section rtl">
				<div><a class="uibutton icon add submit_form">إضافة</a></div>
                <label> التاريخ <small>تاريخ الموعد</small></label>  
                <div><input type="text"  id="datepick" class="datepicker" readonly="readonly" name="event_date"  /></div>
    		</div>
			<div class="section rtl">
				<label> الوصف <small> وصف الموعد</small></label>   
                <div><input type="text"  id="event_libelle" class="validate[required] large" data-prompt-position="topLeft:-10" name="event_libelle" style="direction:ltr;text-align: center" /></div>
			</div>
    		<div class="section rtl">
                <label>النوع<small>نوع الموعد</small></label>   
                
					<table style="border-collapse:separate;border-spacing: 40px 8px;">
					<tr>
					
					<td>
						<div class="radiorounded">
                        <input type="radio" name="event_type" id="radio-audiance" value="3" />
                        <label for="radio-audiance" title="جلسة"></label>
						</div>
					</td>
			
					<td>
						<div class="radiorounded">
                        <input type="radio" name="event_type" id="radio-procedure" value="4" checked="checked" />
                        <label for="radio-procedure" title="إجراء"></label>
						</div>
                    
					</td>
					<td>
						<div class="radiorounded">
                        <input type="radio" name="event_type" id="radio-autre" value="5" />
                        <label for="radio-autre" title="أخرى"></label>
						</div>
					</td>
					</tr>
						</table>
                
            </div>
				<div class="section rtl" id="heure" style="display:none;">
				<label> الساعة <small> ساعة الموعد</small></label>   
                <div><input type="text"  id="event_heure" class="small"  name="event_heure" style="direction:ltr;text-align: center" /></div>
				</div>
            	<div class="section rtl" id="type" style="">
                   <label>نوع الملف<small>ملف الكتروني داخل التطبيق</small></label>   
                        <div> 
                                <input type="checkbox" id="event_dossier" name="event_typeDossier" class="event_dossier" checked /> 
                        </div>
                </div>
           	<div class="section rtl" id="dossier" style="">
                            <label>رقم الملف<small>وصف</small></label>   
                              <div id="NumDossierElec">
                              	  <select data-placeholder="إختر رقم الملف" class="validate[required] chzn-select"   tabindex="2" name="event_numDossierElec" id="event_numDossierElec">
                                  <option value="" /> 
                                  {% for dossier in listeDossier %}
                                  	<option value="{{ dossier.id }}"/> {{ dossier.numDossier }}
                                  {% endfor %}
                                </select>       
                        	</div>
							<div id="NumDossierSimple" style="display:none;">
								<input type="text"  class="small"  name="event_numDossierSimple" id="event_numDossierSimple" style="direction:ltr;text-align: center" />
							</div>
            </div>
    		<div class="section rtl">
                <label>  الوصف الكامل  <small> الوصف الكامل للموعد </small></label>   
                <div> <textarea name="event_desc" id="event_desc" class="largeXL" style="height:80px" cols="" rows=""></textarea></div>   
								  
            </div>
    	</form>
	</div></div>
	<div id='calendar'></div>
    <!-- clear fix -->
	<div class="clear"></div>

{% endblock %}

{% block footer %}
	La fin , opppps bYe bYe !
{% endblock %}